<template>
  <el-input
    :placeholder="activeData.placeholder"
    :disabled="activeData.disabled"
    :style="activeData.style"
    :clearable="activeData.clearable"
    :maxlength="activeData.maxlength"
    :minlength="activeData.minlength"
    :show-word-limit="activeData['show-word-limit']"
    :show-password="activeData['show-password']"
    :readonly="activeData.readonly"
  >
    <template v-if="activeData['suffix-icon'] !== ''" #suffix>
      <el-icon>
        <component :is="activeData['suffix-icon']"></component>
      </el-icon>
    </template>
    <template v-if="activeData['prefix-icon'] !== ''" #prefix>
      <el-icon>
        <component :is="activeData['prefix-icon']"></component>
      </el-icon>
    </template>

    <template v-if="activeData.slot.prepend" #prepend>{{ activeData.slot.prepend }}</template>
    <template v-if="activeData.slot.append" #append>{{ activeData.slot.append }}</template>
  </el-input>
</template>
<script setup lang="ts" name="GoodInput">
defineProps({
  activeData: {
    type: Object,
    default: () => {
      {
      }
    }
  }
});
</script>
